<template>
  <view class="grace-margin login-wrap">
    <view class="user_avatar_wrap">
      <image
        src="https://pic1.zhimg.com/v2-fda399250493e674f2152c581490d6eb_1200x500.jpg"
        mode="widthFix"
        lazy-load="false"
      >
      </image>
    </view>
    <form @submit="loginNow" class="grace-form">
      <view class="uni-form-item">
        <uni-icons class="login-icon" size="24" type="contact"/>
        <input
          class="uni-input"
          name="username"
          placeholder="请输入用户名"
          v-model="form.username"
        >
			</view>
      <view class="uni-form-item">
        <uni-icons class="login-icon" size="24" type="locked-filled"/>
        <input
          class="uni-input"
          name="password"
          placeholder="请输入密码"
          type="text"
          v-if="isShowPwd"
          v-model="form.password"
        >
        <input
          class="uni-input"
          name="password"
          placeholder="请输入密码"
          type="password"
          v-else
          v-model="form.password"
        >
        <switch class="login-switch" :checked="isShowPwd" @change="handleChange" />
			</view>
      <button form-type="submit" style="margin-top: 30px" type="primary">登录</button>
    </form>
    <view class="grace-space-between" style="margin-top: 60upx">
      <view class="action">
        <navigator hover-class="none" url="/pages/register/index">注册新用户</navigator>
      </view>
      <view class="action">
        <navigator hover-class="none" url="/pages/findPwd/index">找回密码</navigator>
      </view>
    </view>
  </view>
</template>
<script>
var graceChecker = require('graceUI/graceChecker.js')
import { uniIcons } from '@dcloudio/uni-ui'
import { login } from 'mock/login'

export default {
  components: {
    uniIcons
  },
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      isShowPwd: false,
    }
  },
  methods: {
    loginNow(e) {
      // 表单验证
      var rule = [
        {
          name: 'username',
          checkType: 'notnull',
          errorMsg: '请输入用户名'
        },
        {
          name: 'password',
          checkType: 'notnull',
          errorMsg: '请输入密码'
        }
      ]
      var formData = e.detail.value
      var checkRes = graceChecker.check(formData, rule)
      // 验证通过
      if (checkRes) {
        uni.showLoading({
          title: '登录中',
          mask: true
        })
        login(this.form).then(res => {
          uni.showToast({
            title: res.data,
            success: () => {
              setTimeout(() => {
                uni.switchTab({
                  url: '/pages/index/index'
                })
              }, 1000)
            }
          })
        })
      } else {
        uni.hideLoading()
        uni.showToast({
          title: graceChecker.error,
          icon: 'none'
        })
      }
    },
    handleChange(e) {
      this.isShowPwd = e.detail.value
    }
  }
}
</script>
<style lang="scss" scoped>
.login-wrap {
  padding-top: 100upx;
  .user_avatar_wrap {
    width: 200upx;
    height: 200upx;
    margin: 0upx auto 100upx;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid $uni-border-color;
    image {
      width: 100%;
    }
  }
  .login-switch {
    background-color: $uni-bg-white-color;
    margin: 0;
    padding-top: 10upx
  }
  .login-icon {
    background-color: $uni-bg-white-color;
    padding-left: 10upx;
  }
  .action {
    width: 50%;
    text-align: center;
    color: $uni-color-primary;
  }
  .grace-items {
    background-color: $uni-bg-white-color;
  }
}
</style>
